import React, { Component } from 'react'
import { Button, message, Spin, Select } from 'antd';
import { connect } from 'react-redux'
import Order from '@/Public/Order'
import { userOrderConfig } from '@/Public/Order/orderConfigs'
import { managerGetOrderThunk } from './ActionCreators'
import './index.css'

const { Option } = Select;

const mapStateToProps = (state) => ({

})

const mapDispatchToProps = (dispatch) => ({
  managerGetOrder: (...rest) => dispatch(managerGetOrderThunk(...rest))
})
@connect(mapStateToProps, mapDispatchToProps)
class orderManagement extends Component {
  state = {
    loading: true,
    statusValue: "1",
    selectChange: false
  }

  componentDidMount() {
    const { managerGetOrder } = this.props
    managerGetOrder({ page: sessionStorage.getItem('currentPage') || 1, size: '10' }).then(res => {
      this.setState({
        orderList: res.data.data.list,
        totalCount: res.data.data.totalCount
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  selectChange = (value) => {
    this.setState({
      loading: true,
      statusValue: value,
      selectChange: true
    }, () => {
      switch (value) {
        case '1':
          this.searchOrder()
          break;
        case '2':
          this.searchOrder({ expressStatus: '0' })
          break;
        case '3':
          this.searchOrder({ tradeStatus: '3' })
          break;
        case '4':
          this.searchOrder({ tradeStatus: '10' })
          break;
        default:
          break;
      }
    })

  }

  searchOrder = (data) => {
    const { managerGetOrder } = this.props
    managerGetOrder({ ...{ page: '1', size: '10' }, ...data }).then(res => {
      this.setState({
        orderList: res.data.data.list,
        totalCount: res.data.data.totalCount
      }, () => {
        this.setState({
          loading: false,
          selectChange: false
        })
      })
    })
  }


  changePage = (data) => {
    const { managerGetOrder } = this.props
    sessionStorage.setItem('currentPage', data.page)
    this.setState({
      loading: true
    }, () => {
      managerGetOrder(data).then(res => {
        this.setState({
          orderList: res.data.data.list,
          totalCount: res.data.data.totalCount
        }, () => {
          this.setState({
            loading: false
          })
        })
      })
    })
  }



  render() {
    const { orderList } = this.state
    return (
      <div className="mall-order-list">
        <Select defaultValue="1" onChange={this.selectChange} style={{ width: 200, position: 'absolute', top: '-30px' }} className="order-type-select">
          <Option value="1">全部</Option>
          <Option value="2">未发货</Option>
          <Option value="3">已发货</Option>
          <Option value="4">退货处理</Option>
        </Select>
        <Spin
          tip="Loading..."
          spinning={this.state.loading}
        >
          <Order
            orderConfig={userOrderConfig}
            orderData={orderList}
            changePage={this.changePage}
            statusValue={this.state.statusValue}
            totalCount={this.state.totalCount}
            selectChange={this.state.selectChange}
          />
        </Spin>
      </div>
    )
  }
}

export default orderManagement
